<template>
	<view>
		<scroll-view :scroll-y="true" class="scrollContent" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<view class="clientInfo_container">
				<view class="content">
					<view class="d-flex flex-column j-sb content_item w100p mb15">
						<view class="d-flex a-center mb15">
							<view class="line mr10"></view>
							<view class="title">订单基本信息</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">订单单号</view>
							<view class="value_item">{{order.orderCode || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">订单属性</view>
							<view class="value_item">临时门店订单</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">订单金额</view>
							<view class="value_item">{{order.orderAmount || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">折扣金额</view>
							<view class="value_item">{{order.discountAmount || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb15">
							<view class="title_item">实付金额</view>
							<view class="value_item">{{order.realAmount || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb">
							<view class="title_item">所属客户</view>
							<view class="value_item">{{order.customerName || praseStrEmpty}}</view>
						</view>
					</view>

					<view class="car w100p mb15" v-if="listData.length > 0">
						<view class="d-flex a-center">
							<view class="line mr10"></view>
							<view class="title">商品基本信息</view>
						</view>
						<view>
							<view class="goods_item" v-for="itemY in listData" :key="itemY.productCode">
								<view class="d-flex">
									<view style="width: 160rpx;height: 160rpx;">
										<u--image :showLoading="true" :src="itemY.headUrl1.split('&')[0]" width="160rpx"
											height="160rpx"></u--image>
									</view>
									<view class="d-flex flex-column j-sb flex-1 ml10">
										<view class="title_item">{{itemY.productName}}</view>
										<view class="d-flex a-center j-sb value_item">
											<view class="f_family_din fs20">{{itemY.price}}</view>
											<view>
												<u-number-box :disabled="numDisabled" :disablePlus="numDisabled" :disableMinus="numDisabled"
													:integer="true" :min="0" v-model="itemY.stock" @change="valChange($event, itemY)">
													<view slot="minus" class="minus">
														<u-icon name="minus" size="12"></u-icon>
													</view>
													<text slot="input" style="width: 40rpx;text-align: center;"
														class="input">{{itemY.stock}}</text>
													<view slot="plus" class="plus">
														<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
													</view>
												</u-number-box>
											</view>
										</view>
									</view>
								</view>
								<view v-if="itemY.reserveDate" class="d-flex a-center makeTime mt10">
									<view>预约时间：</view>
									<view>{{itemY.reserveDate}}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="zwf"></view>
					<view class="bottom">
						<view class="bottom_content d-flex a-center j-sb w100p">
							<view class="d-flex">
								<view class="d-flex j-sa count f_family_din">
									<view class="jg1">￥{{order.realAmount}}</view>
									<view v-if="order.orderAmount!='0'" class="jg2">￥{{order.orderAmount}}</view>
								</view>
								<view class="creatOrder pl10" @click="createOrder()">生成订单</view>
							</view>
							<u-icon name="plus-circle-fill" color="#999999" size="84rpx"
								@click="gotoGoodsListPage(order.orderCode)"></u-icon>
						</view>
					</view>
				</view>

				<u-toast ref="uToast" duration="500"></u-toast>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		generateShopCarOrder,
		updateShopCarPlatformApp,
		generateOrderByPlatformApp
	} from "@/api/index.js"

	export default {
		components: {},
		data() {
			return {
				userInfo: uni.getStorageSync('housekeeperInfo'),
				customerCode: "",
				order: {},
				listData: [],
				value: 1,
				timeout: null,
				numDisabled: false
			};
		},
		onLoad(opt) {
			if (opt.customerCode) {
				this.customerCode = opt.customerCode
			}
		},
		onShow() {
			this.generateShopCarOrder()
		},
		methods: {
			generateShopCarOrder() {
				const that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				generateShopCarOrder({
					housekeeperCode: that.userInfo.housekeeperCode,
					customerCode: that.customerCode,
				}).then(res => {
					const obj = res.object

					that.order = obj.order
					that.listData = obj.itemList

					uni.hideLoading()
				})
			},

			valChange(e, val) {
				// console.log(val)
				// console.log('当前值为: ' + e.value)
				// return
				const that = this
				that.numDisabled = true

				uni.showLoading({
					title: '加载中',
					mask: true
				});

				updateShopCarPlatformApp({
					productCode: val.productCode,
					orderCode: that.order.orderCode,
					stock: e.value,
				}).then(res => {
					that.generateShopCarOrder()
					that.numDisabled = false
					uni.hideLoading()
				})
			},

			numberBtn(val, num) {
				const that = this
				that.numDisabled = true

				uni.showLoading({
					title: '加载中',
					mask: true
				});

				updateShopCarPlatformApp({
					productCode: val.productCode,
					orderCode: that.order.orderCode,
					stock: num,
				}).then(res => {
					that.generateShopCarOrder()
					that.numDisabled = false
					uni.hideLoading()
				})
			},

			createOrder() {
				const that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				generateOrderByPlatformApp({
					orderCode: that.order.orderCode
				}).then(res => {
					uni.hideLoading()
					that.$refs.uToast.show({
						type: "success",
						duration: "500",
						message: res.message,
						complete() {
							uni.reLaunch({
								url: '/pages/order/index?tabCurrent=' + '1'
							})
						}
					})
				})
			},

			gotoGoodsListPage(val) {
				uni.navigateTo({
					url: "/pages/consume/goods_list?orderCode=" + val
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.scrollContent {
		//可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
		width: 100%;
	}

	.clientInfo_container {
		box-sizing: border-box;
		padding: 30rpx 28rpx;
		min-height: 100vh;
		background: linear-gradient(179deg, #46ebb0 0%, #ffffff 80%);
		// font-family: Source Han Sans CN, Source Han Sans CN-500 !important;

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;


			.content_item {
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 12rpx;
				background-color: #fff;
				padding: 40rpx;

				.title {
					color: #333333;
					font-size: 34rpx;
					font-weight: 600;
				}

				.line {
					width: 12rpx;
					height: 34rpx;
					background: #38d19a;
					border-radius: 3px;
				}

				.consumeBtn {
					background: #38d19a;
					border-radius: 12px;
					color: #ffffff;
					font-size: 28rpx;
					padding: 8rpx 26rpx;
				}

				.title_item {
					font-size: 28rpx;
					color: #333333;
					font-weight: 600;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
				}
			}

			.car {
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 12rpx;
				background-color: #fff;
				padding: 40rpx;

				.title {
					color: #333333;
					font-size: 34rpx;
					font-weight: 600;
				}

				.line {
					width: 12rpx;
					height: 34rpx;
					background: #38d19a;
					border-radius: 3px;
				}

				.goods_item {
					padding: 30rpx 0;
					border-bottom: 1rpx solid #DADADA;
				}

				.goods_item:last-child {
					padding-bottom: 0;
					border-bottom: 0rpx solid #DADADA;
				}

				.title_item {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.minus {
					width: 22px;
					height: 22px;
					border-width: 1px;
					border-color: #E6E6E6;
					border-style: solid;
					border-top-left-radius: 100px;
					border-top-right-radius: 100px;
					border-bottom-left-radius: 100px;
					border-bottom-right-radius: 100px;
					@include flex;
					justify-content: center;
					align-items: center;
				}

				.input {
					font-size: 28rpx;
					padding: 0 10px;
				}

				.plus {
					width: 22px;
					height: 22px;
					background-color: #41B57F;
					border-radius: 50%;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					justify-content: center;
					align-items: center;
				}

				.makeTime {
					font-size: 28rpx;
					color: #999999;
				}
			}

			.zwf {
				height: 100rpx;
				width: 100%;
			}

			.bottom {
				height: 100rpx;
				position: fixed;
				bottom: 0;
				background: #ffffff;

				.bottom_content {
					// height: 84rpx;

					.count {
						width: 344rpx;
						background: #999999;
						border-radius: 98rpx 0rpx 0px 98rpx;
						height: 84rpx;
						line-height: 84rpx;
						padding: 0 20rpx 0 40rpx;

						.jg1 {
							color: #ffffff;
							font-size: 48rpx;
						}

						.jg2 {
							color: #cbcbcb;
							font-size: 24rpx;
							text-decoration: line-through;
						}
					}

					.creatOrder {
						width: 172rpx;
						background: #38d19a;
						border-radius: 0px 98rpx 98rpx 0px;
						height: 84rpx;
						line-height: 84rpx;
						font-size: 34rpx;
						color: #ffffff;
					}
				}
			}
		}
	}
</style>